<div class="header">
    <div class="title">
        <p>个人创作中心</p>
    </div>
    <div class="helpbox">
        <button (click)="showTutorialWin()">快速入门</button>
        <p-dialog [(visible)]="tutorialWin_display" modal="true" dismissableMask="true">
            <div class="tutorialtext" style="font-size: 18px;line-height: 30px;margin: 10px 50px;">
                <pre># 一级标题</pre>
                <pre>## 二级标题</pre>
                <pre>##### 五级标题</pre>
                <pre>- 列表第一项</pre>
                <pre>- 列表第二项</pre>
                <pre>1. 有序列表第一项</pre>
                <pre>2. 有序列表第二项</pre>
                <pre>[标题](链接地址)</pre>
                <pre>![图片描述](图片链接地址)</pre>
                <pre>*斜体*</pre>
                <pre>**粗体**</pre>
                <pre>>    引用段落</pre>
                <pre>注:>与引用段落之间要有5个空格</pre>
                <pre>```</pre>
                <pre>代码块</pre>
                <pre>```</pre>
            </div>
        </p-dialog>
    </div>
    <div class="helpbox">
        <button (click)="showHelpWin()">常见问题</button>
        <p-dialog [(visible)]="helpWin_display" modal="true" dismissableMask="true">
            <div class="tutorialtext" style="font-size: 18px;line-height: 30px;margin: 10px 50px;">
                <pre>Q: 如何插入空格?</pre>
                <pre>A: &amp;ensp; 或 &amp;emsp;</pre><br>
                <pre>Q: 如何插入换行?</pre>
                <pre>A: &lt;br></pre><br>
            </div>
        </p-dialog>
    </div>
</div>
    <div class="writer">
        <div class="toolbar">
            <div class="filenamebox">
                <input type="text" [(ngModel)]="filename">
            </div>
            <div class="buttonbox">
                <button (click)="showUpload()">保存</button>
           </div>
           <div class="buttonbox">
            <p-fileUpload #fubauto mode="basic" name="DefaultFileUploadFileInput" url="/api/document/upload" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt" maxFileSize="50000000" (onUpload)="uploaddoc($event)" (onError)="uperrordoc($event)" [auto]="true" chooseLabel="链接"></p-fileUpload>
            </div>
            <div class="buttonbox">
                <p-fileUpload #fubauto mode="basic" name="DefaultFileUploadFileInput" url="/api/picture/upload" accept="image/*" maxFileSize="10000000" (onUpload)="uploadpic($event)" (onError)="uperrorpic($event)" [auto]="true" chooseLabel="图片"></p-fileUpload>
            </div>
         
         
           
        </div>
        <textarea #myTextArea id="inputarea" (window:resize)="onResize()" (click)="getCursorPos(myTextArea)" (keyup)="getCursorPos(myTextArea)" pInputTextarea [(ngModel)]="text"></textarea>
    
        
    </div>
    <div class="display">
        <markdown ngPreserveWhitespaces [data]="text">
        </markdown>
    </div>

    <p-dialog [(visible)]="upload_display" [style]="{width: '500px'}"
    modal="true" dismissableMask="true">
        <p-header>
            保存文件
        </p-header>
        <div class="mdfile-info-config">
            <div class="row">
                <div class="col-2">
                    <label>文件名: </label>
                </div>
                <div class="col-8">
                    <input type="text" pInputText [(ngModel)]="filename"/>
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <label>作者: </label>
                </div>
                <div class="col-8">
                    <input type="text" pInputText [(ngModel)]="author" [disabled]="true"/>
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <label>标签: </label>
                </div>
                <div class="col-8">
                    <p-selectButton [options]="catalogs" [(ngModel)]="selectedCatalogs" multiple="multiple" ></p-selectButton>
                </div>
            </div>
        </div>
        <p-footer>
            <p-button label="保存" (onClick)="uploadtext()"></p-button>
        </p-footer>
    </p-dialog>
